<template>
<div>
	
	<el-row>

	<el-form :inline="true" :model="form" >
		
		<el-form-item >
		    <el-input v-model="form.name" placeholder="产品名称"></el-input>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" @click="onSubmit">查询</el-button>
		</el-form-item>

    </el-form>
    </el-row>

  	<el-row>

  	<el-card class="box-card mb20" v-for="item in systemProductList.results">
	  <div slot="header" class="clearfix">

	    <span>[{{item.code}}] <strong>{{item.name}}</strong></span>




	  	<el-button type="success" size="small" class="fr" 
	  	v-if="item.isallow == '0'"
	  	@click="up(item)">上架</el-button>

	  	<el-button type="primary" size="small" class="fr" 
	  	v-if="item.isallow == '1'"
	  	@click="down(item)">下架</el-button>

	  	<el-form :inline="true" :model="form" class="fr" style="margin-top:-5px;">
			<el-form-item >
			    <el-input v-model="item.asort" size="small" placeholder="产品名称">
			    	<el-button slot="append" @click.native="asort(item)">排序</el-button>
			    </el-input>
			</el-form-item>
	    </el-form>

	  </div>
	  <div >
	    <el-table
	    :data="item.attrlist"
	    border
	    style="width: 100%" >
		    <el-table-column
		      label="型号名称"
		      prop="attr_name"
		      width="300">
		    </el-table-column>

		    <el-table-column
		      label="商城价格"
		      prop="guide_price"
		      width="150">
		    </el-table-column>

		    <el-table-column
		      label="分销价格"
		      prop="cost_price"
		      width="150">
		    </el-table-column>

		    <el-table-column
		      label="利润空间（商城价格 - 分销价格）"
		      >
		       	<template slot-scope="scope">
{{
Math.round((parseFloat(scope.row.guide_price) - parseFloat(scope.row.cost_price)) * 100) / 100
	}}
		      	</template>
		    </el-table-column>
		    
		    </el-table-column>
		</el-table>
	  </div>
	</el-card>
	</el-row>	


	<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="systemProductList.totalRecord">
    </el-pagination>
    </el-row>

</div>		
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	name: 'managersystemproduct',
		data () {
		return {
		  	form : {
		  		name : '',
		  	},

		  	pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

			loading : true,
		}
	},

	props: {

	},

	components: {
		
	},

	computed : {
		...mapGetters([
			'systemProductList',
		]),
	},

	methods : {
		getSystemProductList () {
			var para = {
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				name : this.form.name,
				cb : res => {
					this.loading = false;
				}
			};

			this.loading = true;
			this.$store.dispatch('getSystemProductList', para);
		},

		onSubmit () {
			this.getSystemProductList();
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.getSystemProductList();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.getSystemProductList();
		},

		up (item) {
			let para = {
				'code' : item.code,
				'isallow' : '1',
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '上架成功',
			          type: 'success'
			        });
			        this.getSystemProductList();
				},
				err : res => {
					this.$notify({
			          title: '上架失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('updateSysProduct', para);
		},

		down (item) {
			let para = {
				'code' : item.code,
				'isallow' : '0',
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '下架成功',
			          type: 'success'
			        });
			        this.getSystemProductList();
				},
				err : res => {
					this.$notify({
			          title: '下架失败',
			          message: res,
			          type: 'error'
			        });
				}
			};

			this.$store.dispatch('updateSysProduct', para);
		},

		asort (item) {

			let para = {
				'asort' : item.asort,
				'code' : item.code,
				cb : res => {
					this.$notify({
			          title: '成功',
			          message: '操作成功',
			          type: 'success'
			        });
			        this.getSystemProductList();
				},
				err : res => {
					this.$notify({
			          title: '操作失败',
			          message: res,
			          type: 'error'
			        });
				}
			}

			this.$store.dispatch('asortSysProduct', para);
		},
	},

	watch : {
	    
	},

	mounted () {
		
		this.getSystemProductList();
	},

}
</script>

<style scoped>

</style>
